<template>
  <div>
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.image" alt="product image" class="product-image" />
      <div class="product-details">
        <h3>{{ product.name }}</h3>
        <p>{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      categoryId: 0,
      products: []
    }
  },
  watch: {
    // 监控路由变化，当路由变化时重新获取商品列表
    // 前面是被监听的属性，后面是当被监听的属性发生变化时执行的函数，
    // 可调用methods中的函数，直接写函数名字符串即可，也可以自己编写匿名函数
    '$route.params.categoryId': 'fetchProducts'
  },
  mounted() {
    // 初始化时获取商品列表，但是只会执行一次，不会在路由切换时重新获取
    this.fetchProducts()
  },
  methods: {
    fetchProducts() {
      // 从路由中获取ID
      this.categoryId = this.$route.params.categoryId
      // 根据categoryId获取请求后台商品列表，这里只是模拟
      this.products = [
        {
          id: 1,
          name: `分类ID为${this.categoryId}的商品-1`,
          price: '￥100',
          image: 'https://via.placeholder.com/150'
        },
        {
          id: 2,
          name: `分类ID为${this.categoryId}的商品-2`,
          price: '￥200',
          image: 'https://via.placeholder.com/150'
        }
      ]
    },
    addToCart(product) {
      alert(`添加 ${product.name} 到购物车!`)
    }
  }
}
</script>

<style scoped>
.product-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
}
.product-image {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}
.product-details {
  flex: 1;
}
.product-details h3 {
  margin: 0;
  font-size: 18px;
}
.product-details p {
  margin: 5px 0;
  color: #888;
}
.product-details button {
  padding: 5px 10px;
  background-color: #409eff;
  border: none;
  color: white;
  cursor: pointer;
}
.product-details button:hover {
  background-color: #66b1ff;
}
</style>
